<template>
  <div>
    <slot name="filter"></slot>

    <common-table
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :immediate="false"
      ref="commonTable"
      :columns="config.columns"
      :pageSize="pageSize"
      :currentPage="currentPage"
      :key="tableKey"
    >
      <template v-for="item in scopedSlots" v-slot:[item]="scope">
        <slot :name="item" v-bind="scope"></slot>
      </template>
    </common-table>
  </div>
</template>

<script>
import { generateKey } from '@/utils/data-utils';

export default {
  name: 'search-page',
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      }
    },
    requestFcun: {
      type: Function,
      default() {
        return () => {};
      }
    }
  },
  computed: {
    scopedSlots: function() {
      return Object.keys(this.$scopedSlots).filter(
        key => key !== 'form' && key !== 'tool' && key !== 'form-no-collapse'
      );
    }
  },
  data() {
    return {
      tableKey: generateKey(),
      currentPage: 1,
      pageSize: 5,
      // 活动时间
      rangDateValueStr: '',
      searchCondition: []
    };
  },
  components: {},
  methods: {
    // 接收子组件传来的事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fecthData(this.searchCondition);
    },
    handleCurrentChange(index) {
      this.currentPage = index;
      this.fecthData(this.searchCondition);
    },
    setFilterCondition(query) {
      const { value, key, op } = query;
      let index = this.searchCondition.findIndex(item =>
        op ? item.name === key && item.op === op : item.name === key
      );
      // 查询过该条件
      if (index >= 0) {
        this.searchCondition[index] = Object.assign({}, this.searchCondition[index], {
          value
        });
      } else {
        // 没查询过该条件
        let filter = this.config.reqCondition.params.find(item =>
          op ? item.name === key && item.op === op : item.name === key
        );
        filter = Object.assign({}, filter, {
          value
        });
        this.searchCondition.push(filter);
      }
      this.fecthData(this.searchCondition);
    },
    fecthData(params) {
      const requestCon = this.config.reqCondition;
      // 处理排序字段
      let orders = Array.isArray(requestCon.sorts) && requestCon.sorts.length ? Object.assign(...requestCon.sorts) : {};

      const searchable = {
        page: this.currentPage-1,
        size: this.pageSize,
        sort: JSON.stringify(orders),
        searchCondition: JSON.stringify(params)
      };
      // 保存当前查询条件
      this.searchCondition = JSON.parse(JSON.stringify(params));

      this.$nextTick(() => {
        this.$refs.commonTable &&
          this.$refs.commonTable.search(this.requestFcun, searchable, {
            currentPage: this.currentPage,
            pageSize: this.pageSize
          });
      });
    }
  },
  created() {
    // this.init();
  }
};
</script>

<style lang="scss" scoped></style>
